iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 20
0
Modern Web

Hugo 貼身打造個人部落格系列 第 20

Day 20. Hugo Comments System

  • 分享至 

  • xImage
  •  

前言

當讀者對你的部落格內容有問題,想發問交流時,勢必需要留言溝通的工具,此類工具通常稱為 Comments System (評論系統),常見的有:DisqusFacebook comments、GitHub issue、Livefyre 等。

Hugo 具有追加整合 Comments 服務的彈性,讓我們可以輕鬆地將此類工具,放在任何頁面中,本篇會介紹 Disqus 評論系統的整合方式。

Disqus

按照官網介紹,Hugo 已經幫你內建了一套評論系統:Disqus,以下是啟用的文字版說明,後面會在依照流程附上圖片給大家參考:

  • 未有 Disqus 帳號,請先註冊
  • 已有 Disqus 帳號,請按 GET STARTED
  • 點擊 I want to install Disqus on my site. 頁面在此可快速前往
  • 填入網站資訊:
    • 網站名稱 (Web Site Name)
    • 網站種類 (Category)
    • 按下 Create
  • 進入 Disqus Install 環節:
    • 選擇整合平台:頁面跳到 Select Platform,但因為官方沒有 Hugo 的選項,請拉到最下面選 I don't see my platform listed, install manually with Universal Code
    • 配置整合程式碼:接著 Select Platform 之後,頁面跳到 Universal Code 頁面,在這一步要看使用者選用的佈景,有沒有整合好 Disqus 到你的 layout 中
      • 已有整合:可跳過 Universal Code 這部分
      • 尚未整合:
        • 若你不想換佈景,請參考 Partial Templates 的配置說明,自己動手整合
        • 若你想換佈景,筆者試過用 ananke 以及 tranquilpeak 兩個佈景,都有整合 Disqus
    • 此步驟以「已有整合」為例,在 Universal Code 頁面拉到最下面按 Configure
    • 配置你的 Disqus Configure
      • 網站名稱 Website Name
      • 網站網址 Website URL 請配置上線後的公開網址,子域名就是你的 disqusShortname
      • 網站種類 Category
      • 顯示語系 Language 評論系統介面要顯示的語系
    • 配置好後,按下 Complete Setup
    • 接著 Disqus 會問你要不要設置 Community,這邊先不用,拉到最下面按 Dismiss Setup
    • 完成

附圖說明

未有 Disqus 帳號,請先到官網註冊,請按 GET STARTED:


選擇你偏好的註冊方式,完成註冊,頁面會跳轉回首頁,請按 GET STARTED,選擇 I want to install Disqus on my site

建立新站,填入網站資訊,按下 Create:

選擇整合平台,請拉到最下面選 I don't see my platform listed, install manually with Universal Code


Universal Code 頁面拉到最下面按 Configure

配置完整的網站資訊,

請注意,這邊的 Website URL 子域名會作為 hugo 配置參數 disqusShortname 被使用到,網址結構為: https://yourDisqusShortName.website.com

完成配置後,拉到最下面,按下 Dismiss Setup 跳過配置 Community:

建站完成後,會跳到這個頁面:

Hugo 配置

假設你的 Website URL 為 https://littlebookboy.website.com,則 config.toml 配置就會是:

disqusShortname = "littlebookboy"

本地執行結果,以 tranquilpeak 為例:

線上執行結果 (丟到公開頁面後,評論系統介面才會被渲染成功):

小結

若沒有其他特別需求,選擇使用 Disqus 是很快可以滿足我們需求的方式 (讓使用者可以留言),另外若是想使用如 GitHub issue 這類工具,因為沒有官方文件說明如何整合,想必要使用者自行摸索,或是可以在 google 看有沒有人已經做好工具,導入其他 comment system 到你的 Hugo Site 中了。

參考連結


上一篇
Day 19. Hugo Content 使用圖源、壓縮與工具介紹
下一篇
Day 21. Hugo Pipes
系列文
Hugo 貼身打造個人部落格30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言